.hg-toolbar {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  padding: 0 4px;
  .hg-menu {
    position: relative;
    text-align: center;
    padding: 3px 5px;
    cursor: pointer;
    i {
      color: #999;
    }
    &:hover {
      i {
        color: #333;
      }
    }
    &.active {
      i {
        color: #1e88e5;
      }
      &:hover {
        i {
          color: #1e88e5;
        }
      }
    }
  }
  .el-color-picker {
    border: none;
    width: 16px;
    height: 16px;
  }
  .el-color-picker__color {
    border: none;
    width: 16px;
    height: 16px;
    color: #999;
  }
  &:hover {
    .el-color-picker__color {
      color: #333;
    }
  }

  .el-color-picker__color-inner {
    position: relative !important;
    height: 20% !important;
    bottom: 0px;
    display: block !important;
    border: none;
  }
  .el-color-picker__trigger {
    border: none;
    width: 16px;
    height: 16px;
  }
  .font-color {
    .el-color-picker__color::before {
      display: block;
      height: 80%;
      content: "";
      background-image: url("../../assets/svg/fontcolor.svg");
      background-size: 100% 100%;
    }
  }
  .backgroud-color {
    .el-color-picker__color::before {
      display: block;
      height: 80%;
      content: "";
      background-image: url("../../assets/svg/backgroud.svg");
      background-size: 100% 100%;
    }
  }
}
